<template>
  <div
    class="stepper"
    :class="{ disabled: disabled, round: round }"
    :style="{ height: size }"
  >
    <div
      class="reduce iconfont"
      :class="{ disabled: min === value }"
      :style="{ width: size, lineHeight: size }"
      @click="reduce"
    >
      &#xe715;
    </div>
    <input
      :value="value"
      @input="handleInput"
      :disabled="disabled"
      type="number"
      :style="{ width: `calc(${size} + 5px)` }"
    />
    <div
      class="plus iconfont"
      :style="{ width: size, lineHeight: size }"
      @click="plus"
    >
      &#xe716;
    </div>
  </div>
</template>

<script>
  export default {
    name: "Stepper",
    props: {
      value: Number,
      // 最小值
      min: {
        type: Number,
        default: 1,
      },
      // 步长
      step: {
        type: Number,
        default: 1,
      },
      // 是否禁用
      disabled: {
        type: Boolean,
        default: false,
      },
      // 元素大小
      size: {
        type: String,
        default: "56rpx",
      },
      // 圆角按钮
      round: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {};
    },
    methods: {
      reduce() {
        let { disabled, value, step, min } = this
        let val = value - step

        if (val < min || disabled) return
        this.$emit("input", val)
        this.$emit("reduce", val)
      },
      plus() {
        let { disabled, value, step } = this
        if (disabled) return
        this.$emit("input", value + step)
        this.$emit("plus", value)
      },
      handleInput(e) {
        this.$emit("input", parseInt(e.target.value))
      },
    },
  };
</script>

<style lang="scss" scoped>
  @import './index.scss';
</style>
